function toPage(msg) {
  // event.stopPropagation()
  let srcVal = '';
  let baseUrl = 'http://39.106.116.168:8090';
  switch (msg) {
    /////////////////// 学校管理 ///////////////////
    case '学校查询': srcVal = `${baseUrl}/school`;
      break;
    case '基本信息': srcVal = `${baseUrl}/school/info?id=1`;
      break;
    case '校区信息': srcVal = `${baseUrl}/campus?id=1`;
      break;
    case '院系设置': srcVal = `${baseUrl}/department?id=1`;
      break;
    case '证照资质': srcVal = `${baseUrl}/school-certificate`;
      break;
    /////////////////// 专业管理 ///////////////////    
    case '专业设置': srcVal = `${baseUrl}/major`;
      break;
    case '专业备案': srcVal = 'pages/major/record.html';
      break;
    case '专业群': srcVal = 'pages/major/group.html';
      break;
    /////////////////// 课程管理 ///////////////////
    case '课程计划导入': srcVal = 'pages/course/input.html';
      break;
    case '课程设置': srcVal = `${baseUrl}/course`;
      break;
    case '课程导出': srcVal = 'pages/course/output.html';
      break;
    case '成绩导入': srcVal = 'pages/score/input.html';
      break;
    case '成绩管理': srcVal = 'pages/score/manage.html';
      break;
    case '成绩导出': srcVal = 'pages/score/output.html';
      break;
    case '学校毕业审核': srcVal = 'pages/graduate/school.html';
      break;
    case '主管部门毕业审核': srcVal = 'pages/graduate/maincharge.html';
      break;
    case '毕业证管理': srcVal = 'pages/graduate/diploma.html';
      break;
    case '学籍管理': srcVal = 'pages/studentstatus/manage.html';
      break;
    case '新生报到': srcVal = 'pages/studentstatus/registration.html';
      break;
    case '学籍注册': srcVal = 'pages/studentstatus/register.html';
      break;
    case '学籍异动': srcVal = 'pages/studentstatus/changes.html';
      break;
    case '学籍统计': srcVal = 'pages/studentstatus/statistics.html';
      break;
    case '学籍明细': srcVal = 'pages/studentstatus/details.html';
      break;
    /////////////////// 用户 ///////////////////
    case '用户管理': srcVal = `${baseUrl}/person`;
      break;
    case '角色管理': srcVal = `${baseUrl}/person`;
      break;
    case '授权管理': srcVal = `${baseUrl}/person`;
      break;
  }
  document.querySelector('.main-content iframe').src = srcVal;
}

//////////////////////////////////////// 以上是路由 ////////////////////////////////////////////
let toggleButton = document.querySelector('.toggle-button');

let exitBtn = document.querySelector('nav.top-nav .logined .headimg .dropdown-menu .btn-link .glyphicon-log-out').parentNode

let logined = document.querySelector('nav.top-nav .logined')
let unlogined = document.querySelector('nav.top-nav .unlogined')
let confirmLoginBtn = document.querySelector('.bs-modal-sm .modal-footer button.btn-primary')

// 存储当前展开项的id
let currExpandEle = ''
// 侧边栏的展开状态
let flag = true

$('.sidebar-nav .panel-title > a').on('click', function (e) {
  currExpandEle = '#' + this.parentNode.parentNode.nextElementSibling.id
  $('.sidebar-nav .panel-title > a').css('color', '#000')
  $('.sidebar-nav .panel-title > a > i').css('color', '#000')
  $('.sidebar-nav .panel-title > a').css('font-weight', 'normal')
  $(e.currentTarget).css('color', '#047db6')
  $(e.currentTarget).css('font-weight', 'bold')

  // 侧边栏隐藏只显示图标时，点击图标重现侧边栏
  $('.sidebar-nav .list-head').css('line-height', '40px')
  $('.side-nav').css('width', '220px')
  $('.toggle-button').css('transform', 'rotateZ(0deg)')  // 旋转图标
  if (!flag) {
    $('.custom-tooltip').css('display', 'none')   // 隐藏已显示的tooltip
    $('.sidebar-nav .panel-title > a > i').unbind()   // 当侧边栏显示状态时，解除图标的tooltip事件
    flag = true
  }
})

// 折叠按钮的点击事件
$(toggleButton).on('click', toggle());

function toggle() {
  let sideBar = $('.side-nav')
  let sideBarHead = $('.sidebar-nav .list-head')
  return function (e) {
    if (flag) {
      if (document.querySelector('.collapse.in')) {
        currExpandEle = '#' + document.querySelector('.collapse.in').id
      }
      $(currExpandEle).collapse('hide')   // 先折叠已展开项

      sideBarHead.css('line-height', '0px')
      sideBar.css('width', '43px')
      $(e.currentTarget).css('transform', 'rotateZ(180deg)')
      // 当侧边栏隐藏状态时，重新绑定图标的tooltip事件
      $('.sidebar-nav .panel-title > a > i').on('mouseover', tooltipMouseOver)
      $('.sidebar-nav .panel-title > a > i').on('mouseout', tooltipMouseOut)
    } else {
      if (currExpandEle) {
        $(currExpandEle).collapse('show')
      }

      sideBarHead.css('line-height', '40px')
      sideBar.css('width', '220px')
      $(e.currentTarget).css('transform', 'rotateZ(0deg)')
      $('.sidebar-nav .panel-title > a > i').unbind()   // 当侧边栏显示状态时，解除图标的tooltip事件
    }
    setTimeout(function() {
      calAllTabsData()
      isShowArrows() // 判断是否需要显示左右小箭头
    },300)
    // console.log(allTabsData)
    flag = !flag
  }
}

/////////////////////////////////////////////////// 登入登出事件 ↓ ///////////////////////////////////////////////////
// 读取cookie/localStorage等本地数据判断是否已登录
readLocalStorageToLogin();

exitBtn.addEventListener('click', function () {
  console.log('成功退出登录')
  logined.style.display = 'none'
  unlogined.style.display = 'block'
  localStorage.setItem('hasLogin', '0')
})

confirmLoginBtn.addEventListener('click', function () {
  console.log('已成功登录')
  logined.style.display = 'flex'
  unlogined.style.display = 'none'
  localStorage.setItem('hasLogin', '1')
})

function readLocalStorageToLogin() {
  let flag = parseInt(localStorage.getItem('hasLogin'))
  if (flag) {
    console.log('已登录')
    logined.style.display = 'flex'
    unlogined.style.display = 'none'

  } else {
    console.log('未登录')
    logined.style.display = 'none'
    unlogined.style.display = 'block'
  }
}
/////////////////////////////////////////////////// 登入登出事件 ↑ ///////////////////////////////////////////////////

// 侧边栏图标tooltip事件
function tooltipMouseOver(e) {
  let text = e.target.parentNode.innerHTML.replace(/<.+?>/gim, '').trim()
  let tooltipOffsetTop = e.target.parentNode.parentNode.parentNode.parentNode.offsetTop
  $('.custom-tooltip').css('display', 'block')
  $('.custom-tooltip').css('top', tooltipOffsetTop)
  $('.custom-tooltip .tooltip-inner').text(text)
}

function tooltipMouseOut() {
  $('.custom-tooltip').css('display', 'none')
}

/////////////////////////////////////////////////// 标签页 ↓ ///////////////////////////////////////////////////
// 存储标签页的栈
class Stack {
  constructor(...rest) {
    this.data = rest || []
  }
  push(ele) {
    return this.data.push(ele)
  }
  pop() {
    if (!this.isEmpty()) return this.data.pop()
    return 'empty!'
  }
  splice(index) {
    if (index >= this.size())
      return 'over index!'
    else if (!this.isEmpty())
      return this.data.splice(index, 1)
    else
      return 'empty!'
  }
  isEmpty() {
    return this.data.length <= 0
  }
  size() {
    return this.data.length
  }
  isExist(ele) {
    return this.data.includes(ele)
  }
  toEmpty() {
    this.data.length = 0
  }
}

let stack = new Stack()
let horizontalOffset = 0  // 当前nav-tabs已移动的距离
let allTabsData = []  // 存储标签页签总宽、标签容器宽、上述两者差值

// 创建标签/复用旧标签
function createTab(txt) {
  if (!stack.isExist(txt)) {
    let textNode = document.createTextNode(txt)
    let space = document.createTextNode(' ')
    let a = document.createElement('a')
    let li = document.createElement('li')
    $('.nav-tabs li').removeClass('active')
    $(a).attr({
      'href': 'javascript:void(0)',
      'role': 'tab',
      'data-toggle': 'tab',
      'onclick': `toPage("${txt}")`
    })
    $(li).attr({
      'role': 'presentation',
      'class': 'active'
    })
    $(li).on('click', clickOnTab)
    a.appendChild(textNode)
    a.appendChild(space)
    li.appendChild(a)
    $('.nav-tabs')[0].appendChild(li)
    stack.push(txt)   // 更新标签栈
    calAllTabsData()  // 更新标签页签总宽、标签容器宽、上述两者差值
    if(allTabsData[0] > allTabsData[1]) {
      console.log('溢出')
      $('.nav-tabs').css('transform', `translateX(${horizontalOffset = -allTabsData[2]}px)`)
    }
  } else {
    // 当标签已存在时，复用旧标签并使该旧标签高亮
    let tabItems = document.querySelectorAll('.nav-tabs li a')
    $('.nav-tabs li').removeClass('active')
    let position = 0    // 复用标签所在位置
    Array.from(tabItems).some(item => {
      position += parseInt($(item).css('width'))
      if (item.innerHTML.replace(/<.+?>/gim, '').trim() === txt) {
        $(item.parentNode).addClass('active')
        // 自动滚动nav-tabs，滚动到当前active标签在页面中显示
        if(allTabsData[0] > allTabsData[1]) {
          if(position <= allTabsData[1])
            $('.nav-tabs').css('transform', `translateX(${horizontalOffset = 0}px)`)
          else
            $('.nav-tabs').css('transform', `translateX(${horizontalOffset = allTabsData[1] - position}px)`)
        }
        return true
      }
    })
  }
  return stack.data
}

// 标签获得焦点时的行为
function clickOnTab(e) {
  let txt = $(e.target).text().trim()
  createBreadCrumb(txt)
  // $('.nav-tabs li').removeClass('active')
  // $(e.currentTarget).addClass('active')
}

let deleteBtn = document.querySelectorAll('.delete-tab li')
// 关闭当前标签
$(deleteBtn[0]).on('click', function() {
  // console.log('关闭当前标签')
  // console.log()
  let targetNode = document.querySelector('.nav-tabs li.active')
  let targetIndex = $(targetNode).index()
  let targetSibling = targetNode.nextSibling
  if(stack.size() <= 1) {
    console.log('关闭的是仅剩的一项')
    toPage('课程计划导入')
    createBreadCrumb('课程计划导入')
    $('.nav-tabs').css('height', '0px')   // 当标签页导航栏为空时设置收缩的过渡动画
    $('.delete-tab .glyphicon').css('height', '0px')   // 收缩垃圾桶图标
  } else if(targetIndex === stack.size() - 1) {
    console.log('关闭的是最后一项')
    $(targetNode.parentNode.children[0]).addClass('active')
    toPage(stack.data[0])   // 更新iframe页面
    createBreadCrumb(stack.data[0])
    $('.nav-tabs').css('transform', `translateX(${horizontalOffset = 0}px)`)  // 自动滚动nav-tabs到第一项
  } else {
    console.log('其他')
    $(targetSibling).addClass('active')
    toPage($(targetSibling).text().trim())   // 更新iframe页面
    createBreadCrumb($(targetSibling).text().trim())
    // 自动滚动nav-tabs
    let position = 0
    let allTabs = document.querySelectorAll('.nav-tabs li')
    for(let i = 0; i <= targetIndex; i++) {
      position += parseInt($(allTabs[i]).css('width'))
    }
    console.log(position)
    if(position > allTabsData[1]) {
      $('.nav-tabs').css('transform', `translateX(${horizontalOffset = allTabsData[1] - position}px)`)
    } else {
      $('.nav-tabs').css('transform', `translateX(${horizontalOffset = 0}px)`)
    }
  }
  targetNode.parentNode.removeChild(targetNode)
  stack.splice(targetIndex)   // 最后更新标签页栈
  calAllTabsData()  // 更新标签宽度数据
  $('.nav-tabs').css('width', allTabsData[0])
  if (parseInt($('.nav-tabs').css('width')) <= 5) {  // 当删除最后一个标签时将宽度设为auto，为了让下一次新建标签不受nav-tabs固定宽度的限制
    $('.nav-tabs').css('width', '')
  }
  isShowArrows()  // 判断是否需要显示左右小箭头
})
// 关闭所有标签
$(deleteBtn[1]).on('click', function() {
  console.log('关闭所有标签')
  $('.nav-tabs').empty()
  stack.toEmpty()   // 同时清空标签页栈
  $('.nav-tabs').css('height', '0px')   // 当标签页导航栏为空时设置收缩的过渡动画
  calAllTabsData()  // 更新标签宽度数据
  $('.nav-tabs').css('width', '')   // 为了让下一次新建标签不受nav-tabs固定宽度的限制，将宽度设为auto
  $('.delete-tab .glyphicon').css('height', '0px')   // 收缩垃圾桶图标
  // 清空后iframe打开默认子页面
  toPage('课程计划导入')
  createBreadCrumb('课程计划导入')
})

// 标签右边小叉点击事件
// function removeTabBtn(e) {
//   e.stopPropagation()
//   let removeEle = this.parentNode.parentNode
//   let removeEleParent = removeEle.parentNode
//   let removeIndex = [...removeEleParent.children].indexOf(removeEle)
//   // 标签被删除后默认显示的页面（默认是显示被删除项的后一项）
//   if ($(removeEle).attr('class').split(' ').includes('active')) {   // 当删除的是当前active元素时
//     if (removeEleParent.children.length <= 1) { // 当标签只剩下一个时
//       toPage('课程计划导入')
//       createBreadCrumb('课程计划导入')
//       $('.nav-tabs').css('height', '0px')   // 当标签页导航栏为空时设置收缩的过渡动画
//     } else if (removeIndex === removeEleParent.children.length - 1) {  // 当删除的是最后一个元素时
//       $(removeEleParent.children[0]).addClass('active')
//       toPage($(removeEleParent.children[0]).text().trim())   // 更新iframe页面
//       createBreadCrumb($(removeEleParent.children[0]).text().trim())
//     } else {
//       $(removeEleParent.children[removeIndex + 1]).addClass('active')
//       toPage($(removeEleParent.children[removeIndex + 1]).text().trim())   // 更新iframe页面
//       createBreadCrumb($(removeEleParent.children[removeIndex + 1]).text().trim())
//     }
//   }
//   removeEleParent.removeChild(removeEle)  // 删除目标项
//   stack.splice(removeIndex)   // 将该项从标签页栈中删除
//   calAllTabsData()
//   $('.nav-tabs').css('width', allTabsData[0] + 1)
//   if (parseInt($('.nav-tabs').css('width')) <= 5) {  // 当删除最后一个标签时将宽度设为auto，为了让下一次新建标签不受nav-tabs固定宽度的限制
//     $('.nav-tabs').css('width', '')
//   }
//   isShowArrows()  // 判断是否需要显示左右小箭头
// }

// 计算标签页签总宽、标签容器宽、上述两者差值

function calAllTabsData() {
  let tabListWidth = parseInt($('.top-tab-list').css('width')) - parseInt($('.top-tab-list').css('padding-left'))   // 计算标签容器宽
  let tabs = document.querySelectorAll('.nav-tabs li')    // 计算页签总宽
  let totalWidth = 0
  tabs.forEach(item => totalWidth += (item.offsetWidth % 2 === 0 ? item.offsetWidth : item.offsetWidth + 0.5))  // 兼容firefox和chrome，如果不进行标签求和奇偶数判断，那么firefox情况下标签会折行
  allTabsData = [totalWidth, tabListWidth, totalWidth - tabListWidth]
}

$('.panel-collapse .list-group-item a').on('click', function (e) {
  // 判断当前标签栏是否为空，若为空设置即将被展开的过渡动画
  if (stack.size() <= 0) {
    $('.nav-tabs').css('height', '42px')
    $('.delete-tab .glyphicon').css('height', '43px')
  }

  let text = $(e.target).text().trim()
  createBreadCrumb(text)  // 生成该页面的面包屑导航
  $('.nav-tabs').css('width', '')   // 为防止生成新标签被标签容器nav-tabs限制宽度，所以暂时先把nav-tabs宽度设为auto
  createTab(text)

  $('.nav-tabs').css('width', allTabsData[0])
  isShowArrows() // 判断是否需要显示左右小箭头
})

// 左右小箭头
let prevInterval = null
let nextInterval = null
// 左箭头事件
$('.prev-arrow').on('mousedown', function () {
  let dValue = allTabsData[2]   // "标签页签总宽"和"标签容器宽"的差值
  console.log([horizontalOffset, dValue])
  // console.log(parseInt($('.nav-tabs').css('transform').match(/-?\d+/g)[4]))
  prevInterval = setInterval(function () {
    if (horizontalOffset <= 0)
      $('.nav-tabs').css('transform', `translateX(${horizontalOffset += 50}px)`)
    else
      $('.nav-tabs').css('transform', `translateX(${horizontalOffset = 0}px)`)
  }, 200)
})
// 鼠标键抬起和鼠标焦点移开都可停止事件
$('.prev-arrow').on('mouseup', arrowMouseEnd('prevInterval'))
$('.prev-arrow').on('mouseout', arrowMouseEnd('prevInterval'))

// 右箭头事件
$('.next-arrow').on('mousedown', function () {
  let tabListWidth = parseInt($('.top-tab-list').css('width'))
  nextInterval = setInterval(function () {
    let dValue = allTabsData[2]   // "标签页签总宽"和"标签容器宽"的差值
    console.log([horizontalOffset, dValue])
    if (horizontalOffset >= -dValue)
      $('.nav-tabs').css('transform', `translateX(${horizontalOffset -= 50}px)`)
    else
      $('.nav-tabs').css('transform', `translateX(${horizontalOffset = -dValue}px)`)
  }, 200)
})
// 鼠标键抬起和鼠标焦点移开都可停止事件
$('.next-arrow').on('mouseup', arrowMouseEnd('nextInterval'))
$('.next-arrow').on('mouseout', arrowMouseEnd('nextInterval'))

// 鼠标键从小箭头上抬起或移开
function arrowMouseEnd(label) {
  return function () {
    if (label === 'prevInterval') {
      clearInterval(prevInterval)
      if (horizontalOffset > 0) {
        $('.nav-tabs').css('transform', `translateX(${horizontalOffset = 0}px)`)
      }
    }
    else if (label === 'nextInterval') {
      clearInterval(nextInterval)
      let dValue = allTabsData[2]   // "标签页签总宽"和"标签容器宽"的差值
      if (horizontalOffset < -dValue) {
        $('.nav-tabs').css('transform', `translateX(${horizontalOffset = -dValue}px)`)
      }
    }
  }
}

// 显示隐藏左右小箭头
function isShowArrows() {
  console.log(allTabsData)
  if (allTabsData[2] <= 0) {
    $('.next-arrow').css('display', 'none')
    $('.prev-arrow').css('display', 'none')
  } else {
    $('.next-arrow').css('display', 'block')
    $('.prev-arrow').css('display', 'block')
  }
}
/////////////////////////////////////////////////// 标签页 ↑ ///////////////////////////////////////////////////
createBreadCrumb('课程计划导入')    // 初始化面包屑导航

function createBreadCrumb(txt) {
  let parentLevelText = ''
  $('.panel-collapse .list-group .list-group-item').each(function (index, item) {
    if (txt === $(item).text()) {
      parentLevelText = $(item.parentNode.parentNode.parentNode.querySelector('.panel-title')).text().trim()
    }
  })
  let breadCrumbContainer = document.querySelector('.breadcrumb')
  let breadCrumbData = ['首页', parentLevelText, txt]
  $(breadCrumbContainer).empty()  // 每次更新面包屑导航前先清空上一次的所有子节点
  breadCrumbData.forEach(item => {
    let textNode = document.createTextNode(item)
    let li = document.createElement('li')
    li.appendChild(textNode)
    breadCrumbContainer.appendChild(li)
  })
}

/////////////////////////////////////////////////// 面包屑导航 ↑ ///////////////////////////////////////////////////